<template>
  <div class="case-filing-progress">
    <div class="container mx-auto px-4 py-6">
      <!-- 页面标题 -->
      <div class="mb-8">
        <div class="flex items-center justify-between">
          <div>
            <h1 class="text-2xl font-bold text-gray-800 mb-2">立案进度跟踪</h1>
            <p class="text-gray-600">实时跟踪案件立案进度和状态</p>
          </div>
          <div class="flex gap-3">
            <el-button @click="$router.go(-1)" icon="el-icon-back">
              返回
            </el-button>
            <el-button type="primary" @click="refreshProgress" :loading="loading">
              刷新进度
            </el-button>
          </div>
        </div>
      </div>

      <!-- 进度概览 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">总案件数</p>
              <p class="text-3xl font-bold text-blue-600">{{ stats.totalCases }}</p>
            </div>
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-folder text-blue-600"></i>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">进行中</p>
              <p class="text-3xl font-bold text-orange-600">{{ stats.inProgress }}</p>
            </div>
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-clock text-orange-600"></i>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">已完成</p>
              <p class="text-3xl font-bold text-green-600">{{ stats.completed }}</p>
            </div>
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-check-circle text-green-600"></i>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">成功率</p>
              <p class="text-3xl font-bold text-purple-600">{{ stats.successRate }}%</p>
            </div>
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-chart-line text-purple-600"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 搜索和筛选 -->
      <div class="bg-white rounded-lg shadow-md mb-6">
        <div class="p-6">
          <div class="flex flex-wrap gap-4 items-center">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索案件编号或标题..."
              prefix-icon="el-icon-search"
              style="width: 300px"
            />
            <el-select v-model="filterStatus" placeholder="状态筛选" style="width: 150px">
              <el-option label="全部状态" value="" />
              <el-option label="材料收集" value="collecting" />
              <el-option label="材料审核" value="reviewing" />
              <el-option label="生成文书" value="generating" />
              <el-option label="提交立案" value="submitting" />
              <el-option label="立案完成" value="completed" />
            </el-select>
            <el-select v-model="filterCourt" placeholder="法院筛选" style="width: 200px">
              <el-option label="全部法院" value="" />
              <el-option label="北京市朝阳区人民法院" value="chaoyang" />
              <el-option label="北京市海淀区人民法院" value="haidian" />
              <el-option label="北京市西城区人民法院" value="xicheng" />
            </el-select>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 250px"
            />
            <el-button type="primary" @click="searchCases">
              <i class="fas fa-search mr-1"></i>
              搜索
            </el-button>
            <el-button @click="resetSearch">
              <i class="fas fa-redo mr-1"></i>
              重置
            </el-button>
          </div>
        </div>
      </div>

      <!-- 案件列表 -->
      <div class="bg-white rounded-lg shadow-md">
        <div class="p-6 border-b border-gray-200">
          <h2 class="text-lg font-semibold text-gray-800">立案进度列表</h2>
        </div>
        <div class="p-6">
          <el-table :data="filteredCases" style="width: 100%" v-loading="loading">
            <el-table-column prop="caseNumber" label="案件编号" width="150" />
            <el-table-column prop="caseTitle" label="案件标题" min-width="200" />
            <el-table-column prop="clientName" label="当事人" width="120" />
            <el-table-column prop="court" label="管辖法院" width="200" />
            <el-table-column prop="currentStep" label="当前步骤" width="120">
              <template #default="scope">
                <el-tag :type="getStepType(scope.row.currentStep)">
                  {{ getStepText(scope.row.currentStep) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="progress" label="进度" width="150">
              <template #default="scope">
                <el-progress 
                  :percentage="scope.row.progress" 
                  :color="getProgressColor(scope.row.progress)"
                  :show-text="false"
                />
                <span class="text-xs text-gray-500 ml-2">{{ scope.row.progress }}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="lastUpdate" label="最后更新" width="180" />
            <el-table-column prop="estimatedTime" label="预计完成" width="120" />
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="scope">
                <el-button size="small" type="primary" @click="viewDetail(scope.row)">
                  查看详情
                </el-button>
                <el-button size="small" type="success" @click="trackProgress(scope.row)">
                  跟踪进度
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="mt-4 flex justify-between items-center">
            <span class="text-gray-600">共 {{ filteredCases.length }} 条记录</span>
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="filteredCases.length"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>
        </div>
      </div>

      <!-- 进度详情弹窗 -->
      <el-dialog
        v-model="progressDialogVisible"
        title="立案进度详情"
        width="800px"
        :before-close="closeProgressDialog"
      >
        <div v-if="selectedCase" class="progress-detail">
          <!-- 案件信息 -->
          <div class="mb-6 p-4 bg-gray-50 rounded-lg">
            <h3 class="font-semibold text-gray-800 mb-3">案件信息</h3>
            <div class="grid grid-cols-2 gap-4 text-sm">
              <div>
                <span class="text-gray-600">案件编号：</span>
                <span class="text-gray-800">{{ selectedCase.caseNumber }}</span>
              </div>
              <div>
                <span class="text-gray-600">案件标题：</span>
                <span class="text-gray-800">{{ selectedCase.caseTitle }}</span>
              </div>
              <div>
                <span class="text-gray-600">当事人：</span>
                <span class="text-gray-800">{{ selectedCase.clientName }}</span>
              </div>
              <div>
                <span class="text-gray-600">管辖法院：</span>
                <span class="text-gray-800">{{ selectedCase.court }}</span>
              </div>
            </div>
          </div>

          <!-- 进度时间线 -->
          <div class="mb-6">
            <h3 class="font-semibold text-gray-800 mb-3">进度时间线</h3>
            <el-timeline>
              <el-timeline-item
                v-for="(step, index) in selectedCase.progressSteps"
                :key="index"
                :timestamp="step.time"
                :type="step.status === 'completed' ? 'success' : step.status === 'current' ? 'primary' : 'info'"
              >
                <div class="flex justify-between items-start">
                  <div>
                    <h4 class="font-medium text-gray-800">{{ step.title }}</h4>
                    <p class="text-sm text-gray-600 mt-1">{{ step.description }}</p>
                    <p v-if="step.details" class="text-xs text-gray-500 mt-1">{{ step.details }}</p>
                  </div>
                  <el-tag :type="getStepStatusType(step.status)" size="small">
                    {{ getStepStatusText(step.status) }}
                  </el-tag>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>

          <!-- 下一步操作 -->
          <div v-if="selectedCase.nextStep" class="p-4 bg-blue-50 rounded-lg">
            <h3 class="font-semibold text-blue-800 mb-2">下一步操作</h3>
            <p class="text-sm text-blue-700">{{ selectedCase.nextStep.description }}</p>
            <div class="mt-3">
              <el-button type="primary" size="small" @click="executeNextStep">
                {{ selectedCase.nextStep.action }}
              </el-button>
            </div>
          </div>
        </div>
        
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="closeProgressDialog">关闭</el-button>
            <el-button type="primary" @click="refreshCaseProgress">
              刷新进度
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'CaseFilingProgress',
  setup() {
    const loading = ref(false)
    const progressDialogVisible = ref(false)
    const selectedCase = ref(null)
    
    // 搜索和筛选
    const searchKeyword = ref('')
    const filterStatus = ref('')
    const filterCourt = ref('')
    const dateRange = ref([])
    const currentPage = ref(1)
    const pageSize = ref(10)

    // 统计数据
    const stats = ref({
      totalCases: 25,
      inProgress: 8,
      completed: 15,
      successRate: 92
    })

    // 案件数据
    const cases = ref([
      {
        id: 1,
        caseNumber: 'CASE2024001',
        caseTitle: '交通事故人身损害赔偿纠纷',
        clientName: '王先生',
        court: '北京市朝阳区人民法院',
        currentStep: 'generating',
        progress: 75,
        lastUpdate: '2024-01-18 14:30:00',
        estimatedTime: '2天',
        progressSteps: [
          {
            time: '2024-01-15 10:30:00',
            title: '材料收集',
            description: '收集案件相关材料',
            details: '已上传交通事故认定书、医疗费用清单等材料',
            status: 'completed'
          },
          {
            time: '2024-01-16 09:15:00',
            title: '材料审核',
            description: '审核材料完整性',
            details: '材料审核通过，符合立案条件',
            status: 'completed'
          },
          {
            time: '2024-01-17 16:00:00',
            title: '生成文书',
            description: '生成立案所需文书',
            details: '正在生成民事起诉状、证据清单等文书',
            status: 'current'
          },
          {
            time: '',
            title: '提交立案',
            description: '提交立案申请',
            status: 'pending'
          },
          {
            time: '',
            title: '立案完成',
            description: '立案流程完成',
            status: 'pending'
          }
        ],
        nextStep: {
          description: '文书生成完成后，将自动提交立案申请',
          action: '手动提交立案'
        }
      },
      {
        id: 2,
        caseNumber: 'CASE2024002',
        caseTitle: '劳动合同纠纷案',
        clientName: '李女士',
        court: '北京市海淀区人民法院',
        currentStep: 'reviewing',
        progress: 45,
        lastUpdate: '2024-01-18 11:20:00',
        estimatedTime: '3天',
        progressSteps: [
          {
            time: '2024-01-16 14:20:00',
            title: '材料收集',
            description: '收集案件相关材料',
            details: '已上传劳动合同、工资条等材料',
            status: 'completed'
          },
          {
            time: '2024-01-18 11:20:00',
            title: '材料审核',
            description: '审核材料完整性',
            details: '材料审核中，需要补充部分证据材料',
            status: 'current'
          },
          {
            time: '',
            title: '生成文书',
            description: '生成立案所需文书',
            status: 'pending'
          },
          {
            time: '',
            title: '提交立案',
            description: '提交立案申请',
            status: 'pending'
          },
          {
            time: '',
            title: '立案完成',
            description: '立案流程完成',
            status: 'pending'
          }
        ],
        nextStep: {
          description: '需要补充劳动合同解除证明等材料',
          action: '补充材料'
        }
      },
      {
        id: 3,
        caseNumber: 'CASE2024003',
        caseTitle: '房屋买卖合同纠纷',
        clientName: '张先生',
        court: '北京市西城区人民法院',
        currentStep: 'completed',
        progress: 100,
        lastUpdate: '2024-01-17 16:45:00',
        estimatedTime: '已完成',
        progressSteps: [
          {
            time: '2024-01-15 09:00:00',
            title: '材料收集',
            description: '收集案件相关材料',
            details: '已上传房屋买卖合同、付款凭证等材料',
            status: 'completed'
          },
          {
            time: '2024-01-16 10:30:00',
            title: '材料审核',
            description: '审核材料完整性',
            details: '材料审核通过',
            status: 'completed'
          },
          {
            time: '2024-01-16 15:20:00',
            title: '生成文书',
            description: '生成立案所需文书',
            details: '已生成民事起诉状、证据清单等文书',
            status: 'completed'
          },
          {
            time: '2024-01-17 14:00:00',
            title: '提交立案',
            description: '提交立案申请',
            details: '立案申请已提交至法院',
            status: 'completed'
          },
          {
            time: '2024-01-17 16:45:00',
            title: '立案完成',
            description: '立案流程完成',
            details: '立案成功，立案号：LA2024003001',
            status: 'completed'
          }
        ],
        nextStep: null
      }
    ])

    // 计算属性
    const filteredCases = computed(() => {
      let filtered = cases.value

      if (searchKeyword.value) {
        filtered = filtered.filter(case_ => 
          case_.caseNumber.includes(searchKeyword.value) ||
          case_.caseTitle.includes(searchKeyword.value) ||
          case_.clientName.includes(searchKeyword.value)
        )
      }

      if (filterStatus.value) {
        filtered = filtered.filter(case_ => case_.currentStep === filterStatus.value)
      }

      if (filterCourt.value) {
        filtered = filtered.filter(case_ => case_.court.includes(filterCourt.value))
      }

      return filtered
    })

    // 方法
    const getStepType = (step) => {
      const types = {
        collecting: 'info',
        reviewing: 'warning',
        generating: 'primary',
        submitting: 'warning',
        completed: 'success'
      }
      return types[step] || 'info'
    }

    const getStepText = (step) => {
      const texts = {
        collecting: '材料收集',
        reviewing: '材料审核',
        generating: '生成文书',
        submitting: '提交立案',
        completed: '立案完成'
      }
      return texts[step] || '未知'
    }

    const getProgressColor = (percentage) => {
      if (percentage >= 100) return '#67C23A'
      if (percentage >= 80) return '#E6A23C'
      if (percentage >= 60) return '#409EFF'
      return '#F56C6C'
    }

    const getStepStatusType = (status) => {
      const types = {
        completed: 'success',
        current: 'primary',
        pending: 'info'
      }
      return types[status] || 'info'
    }

    const getStepStatusText = (status) => {
      const texts = {
        completed: '已完成',
        current: '进行中',
        pending: '待处理'
      }
      return texts[status] || '未知'
    }

    const searchCases = () => {
      ElMessage.success('搜索完成')
    }

    const resetSearch = () => {
      searchKeyword.value = ''
      filterStatus.value = ''
      filterCourt.value = ''
      dateRange.value = []
      ElMessage.info('搜索条件已重置')
    }

    const refreshProgress = async () => {
      loading.value = true
      try {
        await new Promise(resolve => setTimeout(resolve, 1000))
        ElMessage.success('进度刷新成功')
      } catch (error) {
        ElMessage.error('进度刷新失败')
      } finally {
        loading.value = false
      }
    }

    const viewDetail = (case_) => {
      selectedCase.value = case_
      progressDialogVisible.value = true
    }

    const trackProgress = (case_) => {
      selectedCase.value = case_
      progressDialogVisible.value = true
    }

    const closeProgressDialog = () => {
      progressDialogVisible.value = false
      selectedCase.value = null
    }

    const executeNextStep = () => {
      if (selectedCase.value && selectedCase.value.nextStep) {
        ElMessage.success(`执行操作：${selectedCase.value.nextStep.action}`)
      }
    }

    const refreshCaseProgress = async () => {
      if (selectedCase.value) {
        ElMessage.success('案件进度刷新成功')
      }
    }

    onMounted(() => {
      // 初始化数据
    })

    return {
      loading,
      progressDialogVisible,
      selectedCase,
      searchKeyword,
      filterStatus,
      filterCourt,
      dateRange,
      currentPage,
      pageSize,
      stats,
      cases,
      filteredCases,
      getStepType,
      getStepText,
      getProgressColor,
      getStepStatusType,
      getStepStatusText,
      searchCases,
      resetSearch,
      refreshProgress,
      viewDetail,
      trackProgress,
      closeProgressDialog,
      executeNextStep,
      refreshCaseProgress
    }
  }
}
</script>

<style scoped>
.case-filing-progress {
  min-height: 100vh;
  background: #f5f7fa;
}

/* 自定义样式 */
.el-progress {
  margin-right: 8px;
}

.el-table .el-table__row:hover {
  background-color: #f5f7fa;
}

.progress-detail {
  max-height: 600px;
  overflow-y: auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
  
  .el-table {
    font-size: 12px;
  }
  
  .flex-wrap {
    flex-direction: column;
  }
  
  .flex-wrap > * {
    width: 100%;
    margin-bottom: 8px;
  }
}
</style>
